<template>
    <div class="nav-container">
        <div class="nav-left">
            <div class="logo">
                <code-icon />
                <span>开发者探索社区</span>
            </div>

            <el-menu mode="horizontal" :router="true" :default-active="currentPath" class="menu-items">
                <el-menu-item index="/">主页</el-menu-item>
                <el-menu-item index="/baguwen">刷八股</el-menu-item>
                <el-menu-item index="/onlinejudge">OJ判题</el-menu-item>
                <el-menu-item index="/aboutus">关于我们</el-menu-item>
            </el-menu>
        </div>

        <div class="nav-right">
            <el-input v-model="searchText" placeholder="发现资源" :prefix-icon="Search" />

            <el-button type="primary">发布</el-button>

            <el-badge :value="3" class="notice-badge">
                <el-icon>
                    <Bell />
                </el-icon>
            </el-badge>

            <!-- 修改用户头像部分 -->
            <div class="user-info" @click="router.push(PageConstant.ProfilePage)">
                <el-avatar :size="32" :src="userInfo.avatar || '/default-avatar.png'" class="clickable-avatar" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Search, Bell } from '@element-plus/icons-vue';
import { useUserStore } from '@/stores/userStores';
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';
import { PageConstant } from '@/common/Constant';

const route = useRoute();

const router = useRouter();

// 用户信息
const {userInfo} = storeToRefs(useUserStore());

// 搜索文本
const searchText = ref<string>("");

// 当前路径
const currentPath = computed(() => route.path)

</script>

<style scoped>
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    border-bottom: 1px solid #eee;
    position: relative;
    /* 添加这行 */
    z-index: 100;
    /* 添加这行 */
    background: white;
    /* 添加背景色，否则导航栏可能会透明 */
}

.nav-left {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 18px;
    font-weight: bold;
}

.menu-items {
    border-bottom: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-badge {
    font-size: 20px;
    cursor: pointer;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    /* 添加这行，表明可点击 */
}

.clickable-avatar {
    transition: transform 0.2s;
    /* 添加过渡效果 */
}

.clickable-avatar:hover {
    transform: scale(1.1);
    /* 鼠标悬停时略微放大 */
}
</style>